<template>
  <a-layout-header class="header">
    <a-menu mode="horizontal" class="menus">
    
    
     <li class="grep">
        <a-menu-item> |</a-menu-item>
      </li>
      <!-- 遍历顶部列表数据并动态渲染菜单项 -->
      <a-menu-item v-for="item in topList" :key="item.id">
     
  
      
        <RouterLink :to="{name:'topContent',query:{topId:item.id,topName:item.name}}">
              {{ item.name }}
        </RouterLink>
      </a-menu-item>

    </a-menu>


 
 

 
  </a-layout-header>

  <RouterView  >

  </RouterView>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";

//主题
const theme = ref("dark");



import api from "@/api";
import { RouterLink, RouterView } from "vue-router"; // 引入 useRouter


onMounted(() => {
  getTopList();
});


const topList = reactive([]);
// 异步获取顶部列表数据
const getTopList = async () => {
  const data = await api.topList();
  topList.push(...data)

  console.log("获取顶部数据",topList);
};


</script>

<style scoped>
.menus {
  width: 100vw;
  display: flex;
  justify-content: start;
  align-items: center;
  height: 64px;
}
.grep {
  pointer-events: none;
  margin-left: 3%;
}
</style>
